<template>
  <div>
    <h1>权限校验示例</h1>
    <button @click="checkRole">检查角色</button>
    <button @click="checkSinglePermission">检查单一权限</button>
    <button @click="checkAnyPermission">检查任意权限</button>
    <button @click="checkAllPermissions">检查所有权限</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import permission from '../utils/permission';

export default defineComponent({
  name: 'PermissionExample',
  methods: {
    checkRole() {
      if (permission.hasRole('admin')) {
        alert('您是管理员，可以访问该资源！');
      } else {
        alert('您没有管理员权限，无法访问该资源。');
      }
    },
    checkSinglePermission() {
      if (permission.hasPermission('view-reports')) {
        alert('您有查看报告的权限。');
      } else {
        alert('您没有查看报告的权限。');
      }
    },
    checkAnyPermission() {
      const permissions = ['view-reports', 'edit-reports'];
      if (permission.hasAnyPermission(permissions)) {
        alert('您具有以下权限中的至少一个：' + permissions.join(', '));
      } else {
        alert('您没有以下权限中的任何一个：' + permissions.join(', '));
      }
    },
    checkAllPermissions() {
      const permissions = ['view-reports', 'edit-reports'];
      if (permission.hasAllPermissions(permissions)) {
        alert('您具有以下所有权限：' + permissions.join(', '));
      } else {
        alert('您没有以下所有权限：' + permissions.join(', '));
      }
    }
  }
});
</script>